<!DOCTYPE html> 
<html> 
  <head> 
    <title>jquery.multi-select.js - user-friendlier select multiple replacement</title>
    <meta name="description" content="A tiny jQuery plugin which make your select with multiple attribute not suck !">
    <link href="css/multi-select.css" rel="stylesheet" type="text/css">
    <link href="css/application.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-23068623-1']);
      _gaq.push(['_setDomainName', '.loudev.com']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>
  </head> 
  <body>   
    <div id='page'>
      <a href='https://github.com/lou/multi-select/zipball/master' class='download button green'><img src='img/download.png' width='16' height='16'/>Download</a>  
      <h1>jquery.multi-select.js</h1>
      <ul id='menu'>
        <li class='active'><a href='index.html'>Home</a></li>
        <li>&middot;</li>
        <li><a href='demos.html'>Demos</a></li>
        <li>&middot;</li>
        <li><a href='documentation.html'>Documentation</a></li>
        <li id='fork-me'>Fork me on <a href='https://github.com/lou/multi-select'>Github</a></li>
      </ul>
      <h2>Making your &lt;select&gt; with multiple attribute not suck !</h2>
      <p>
        The purpose of this plugin is to be a drop-in replacement for your &lt;select&gt; with multiple attribute.
      </p>
      <br />
      <div id='demo'>
        <form>
          <select multiple='multiple' class='multiselect'>
            <option value='fr' title='france'>France</option>
            <option value='ca'>Canada</option>
            <option value='ar'>Argentina</option>
            <option value='pt'>Portugal</option>
            <option value='us'>United States</option>
            <option value='gb'>United Kingdom</option>
            <option value='au'>Australia</option>
            <option value='ao'>Angola</option>
            <option value='aq'>Antarctica</option>
            <option value='bq'>Burkina Faso</option>
            <option value='cn'>China</option>
          </select>
        </form>
      </div>
      <ul id='features'>
        <li>It works in an unobtrusive fashion.</li>
        <li>Entirely styleable with CSS.</li>
        <li>No extra HTML markup needed.</li>
        <li>You can add as many select as you want on a single page.</li>
        <li>It provides some callbacks.</li>
        <li>Methods can be called from outside.</li>
        <li>Entirely open sourced.</li>
        <li>Tiny code (< 3KB).</li>
        <li>Tested on: Firefox 3/4, chrome 10, safari 5, IE 7/8/9.</li>
        <li>Works with jQuery 1.4+</li>
      </ul>
      <h3>Usage</h3>
      <p>
        <strong>Note:</strong> because of the new prop() method, if you use jquery 1.6+ use jquery.multi-select.1.6.js, if not use jquery.multi-select.js.
      <p>
      <p>
        Add a css class to all multiple select you want to customize.<br />
      </p>
      <pre>
      <code class='html'>
      &lt;select multiple='multiple' class='your_class' name='your_name[]'&gt;
        &lt;option value='fr'&gt;France&lt;/option&gt;
        ...
      &lt;/select&gt;</code>
      </pre>
      <p>Add following code to your project</p>
      <pre>
      <code class='javascript'>
      $(function(){
        $('.your_class').multiSelect();
      });</code>
      </pre>
      <h3>Contributors</h3>
      <ul>
        <li><a href='https://github.com/lou' target='_blank'>lou</a> (Author)</li>
        <li><a href='https://github.com/Serophos' target='_blank'>Serophos</a></li>
      </ul>
    </page>
    <script src="js/jquery.js" type="text/javascript"></script> 
    <script src="js/jquery.multi-select.js" type="text/javascript"></script>
    <script src="js/application.js" type="text/javascript"></script>
  </body>
</html>
